<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>石材排名设置</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" href="admin/css/common.css" type="text/css" />
<link rel="stylesheet" href="admin/css/provider.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="admin/js/mulselect.js"></script>
<script type="text/javascript">
	function check(){
		$('#selectedStones').val("0");
		var sel = document.getElementById('selStones');
		var s = ""
		for(var i=0; i < sel.options.length; i++){
			if(sel.options[i]) s += sel.options[i].value + ";";
			}
		s = s.substr(0,s.length-1);
		$('#selectedStones').val(s);
		alert('保存成功!');	
	}

	function radioClick(elem) {
		if (elem.value == 1) {
			$('#color_select').css("display", "none");
			$('#purpose_select').css("display", "inline");
		} else {
			$('#purpose_select').css("display", "none");
			$('#color_select').css("display", "inline");
		}
	}

	function changeCategory() {
		var rankflag = null;
		var category = null;
		if ($('#purpose_radio:checked').val() == true)
		{
			rankflag = 1;
			category = $('#purpose_select').val();
		} else {
			rankflag = 0;
			category = $('#color_select').val();
		}
		var param = {
			rankflag : rankflag,
			category : category
		};
		jQuery.post("getStoneListAjax.action", param, liststoneFunc, "json");
	}
	
	function liststoneFunc(data)
	{
		var temp = "";
		temp += '<select  class="sel" multiple="multiple" size="20" name="allStones" id="allStones" ondblclick="move(this.form.allStones,this.form.selStones)">';
		for(i=0 ; i < data.listSize;i++ ){
			temp += '<option value="'+data.stonesList[i].id+'">';
			temp += data.stonesList[i].chineseName;
			temp += '</option>';
		}
		temp += '</select>';
		$('#allStonesDiv').html(temp);
		
		//右边已排名内容
		temp = '<select  class="sel" multiple="multiple" size="20" name="selStones" id="selStones" ondblclick="move(this.form.selStones,this.form.allStones)">';
		for(i=0 ; i < data.alreadyRankedStonesList.length;i++ ){
			temp += '<option value="'+data.alreadyRankedStonesList[i].id+'">';
			temp += data.alreadyRankedStonesList[i].chineseName;
			temp += '</option>';
		}
		temp += '</select>';
		$('#selStonesDiv').html(temp);
	}
</script>
</head>
<body>
	<div id="provider_zone">
		<div style="text-align:center;padding:5px;margin:auto;">
			
				<input name = "radio" id="purpose_radio" onclick="radioClick(this)" type="radio"
					value="1" checked="true" />按用途排名 
				<input name = "radio" id="color_radio"	onclick="radioClick(this)" type="radio" value="2" />按颜色排名
				<select id="purpose_select" onchange="changeCategory()">
					<option value="">请选择</option>
					<option value="室内地面">室内地面</option>
					<option value="室内墙面">室内墙面</option>
					<option value="室外地面">室外地面</option>
					<option value="室外墙面">室外墙面</option>
					<option value="柱面">柱面</option>
					<option value="楼梯">楼梯</option>
					<option value="台面板">台面板</option>
					<option value="洗手池">洗手池</option>
					<option value="浴缸">浴缸</option>
					<option value="壁炉">壁炉</option>
					<option value="雕塑">雕塑</option>
					<option value="马赛克">马赛克</option>
				</select> <select id="color_select" style="display:none;"
					onchange="changeCategory()">
					<option value="">请选择</option>
					<option value="白色">白色</option>
					<option value="黑色">黑色</option>
					<option value="红色">红色</option>
					<option value="灰色">灰色</option>
					<option value="黄色">黄色</option>
					<option value="蓝色">蓝色</option>
					<option value="绿色">绿色</option>
					<option value="紫色">紫色</option>
					<option value="棕色">棕色</option>
					<option value="青色">青色</option>
					<option value="彩色">彩色</option>
				</select>
		</div>
		<form action="rank/saveStoneRank.action" name="providerForm"
			method="post" onsubmit="return check();">
			<table width="80%" border="0" align="center" cellpadding="3"
				cellspacing="1" class="table_style">
				<tr class="head">
					<th width="260px">可供选择的石材</th>
					<th width="100px">操作</th>
					<th width="260px">石材排名</th>
				</tr>
				<tr>
					<td style="text-align: center;">
						<div id="allStonesDiv">
							<select class="sel" multiple="multiple" size="20"
								name="allStones" id="allStones"
								ondblclick="move(this.form.allStones,this.form.selStones)">
								
								<c:forEach items="${stonesList }" var="stoneItem">
									<option value="${stoneItem.id }">
										${stoneItem.chineseName }</option>
								</c:forEach>
								 
							</select>
						</div></td>
					<td style="text-align: center; background-color: #ffffff;"><input
						type="button" class="btn" value="全部右移"
						onclick="moveall(this.form.allStones,this.form.selStones)"
						name="B1">
						<p></p> <input type="button" class="btn" value="选中右移"
						onclick="move(this.form.allStones,this.form.selStones)" name="B2">
						<p></p> <input type="button" class="btn" value="选中左移"
						onclick="move(this.form.selStones,this.form.allStones)" name="B3">
						<p></p> <input type="button" class="btn" value="全部左移"
						onclick="moveall(this.form.selStones,this.form.allStones)"
						name="B4"></td>
					<td style="text-align: center;" id="selStonesDiv"><select class="sel"
						multiple="multiple" size="20" name="selStones" id="selStones"
						ondblclick="move(this.form.selStones,this.form.allStones)">
							
		      		 <c:forEach items="${aleadyRemommendedList }" var="item">
						<option value="${item.id }">
							${item.chineseName }
						</option>
					</c:forEach>
					 
					</select> 
					</td>
					<input type="hidden" id="selectedStones" name="selectedStones" />
				</tr>
				<tr>
					<td colspan="3" class="left_title_2"><input type="submit"
						class="input-submit" value="保存"></td>
				</tr>
			</table>
		</form>
	</div>
</body>
<script type="text/javascript">
	SortD(document.getElementById('allStones'));
	SortD(document.getElementById('selStones'));
</script>
</html>
